<template>
  <a-dropdown>
    <div class="flex-start-center">
      <a-tag v-if="isHomeStore" color="blue">
        总部
      </a-tag>
      <a-tag v-else color="orange">
        门店
      </a-tag>
      <span>
        {{ storeName }}
      </span>
      <a-icon type="down" />
    </div>
    <a-menu slot="overlay">
      <a-menu-item v-if="isHeadquarters">
        <div class="flex-start-center" @click="storeHome()">
          <a-tag color="blue">
            总部
          </a-tag>
          <span>总部</span>
        </div>
      </a-menu-item>
      <a-menu-item v-for="(item, index) in stores" :key="index">
        <div class="flex-start-center" @click="toggleStore(item.store_id)">
          <a-tag color="orange">
            门店
          </a-tag>
          <span>{{ item.title }}</span>
        </div>
      </a-menu-item>
    </a-menu>
  </a-dropdown>
</template>

<script>
import { mapGetters } from 'vuex'
import { setStore, removeStore } from '@/utils/storage'
export default {
  data() {
    return {}
  },
  computed: {
    ...mapGetters({
      stores: 'user/stores',
      storeName: 'user/storeName',
      isHomeStore: 'user/isHomeStore',
      isHeadquarters: 'user/isHeadquarters'
    })
  },
  methods: {
    toggleStore(store_id) {
      setStore('store_id', store_id)
      window.location.reload()
    },
    storeHome() {
      removeStore('store_id')
      window.location.reload()
    }
  }
}
</script>
